<template>
  <div>
    <p>文章列表</p>
    <hr />
    <el-row :gutter="20">
      <el-col :span="18">
        分类：
        <el-select v-model="valueSearch" placeholder="请选择" @change="changeSearchValue" clearable>
          <el-option
            v-for="item in cahelist"
            :key="item.id"
            :label="item.cate_name"
            :value="item.id"
            
          >
          </el-option>
        </el-select>
        发布状态：
        <el-select v-model="valueState" placeholder="请选择" @change="changeSearchState" clearable>
          <el-option
            v-for="item in Statelist"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
        <el-button type="primary" @click="getarticle">筛选</el-button>
        <el-button type="info" @click="reset">重置</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="dialogVisible = true"
          >发布文章</el-button
        >
      </el-col>
    </el-row>
    <!-- table -->
   
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="title" label="文章标题" > </el-table-column>
      <el-table-column prop="cate_name" label="分类" > </el-table-column>
      <el-table-column prop="pub_date" label="发表时间">
       <template slot-scope="scope">
            <!-- 使用了时间过滤器 -->
            {{ scope.row.pub_date | dateFormat }}
          </template>
       </el-table-column>
        <el-table-column prop="state" label="状态"> </el-table-column>
          <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
          <el-button type='danger'>删除</el-button>
            
          </template>
          </el-table-column>
    </el-table>
 <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="100%">
      <el-form label-width="100px" :model="Form" :rules="rules">
        <el-form-item label="标题" prop="title">
          <el-input v-model="Form.title"></el-input>
        </el-form-item>

        <!-- 分类 -->
        <el-form-item label="分类">
          <el-select v-model="value" placeholder="请选择" @change="change">
            <el-option
              v-for="item in cahelist"
              :key="item.id"
              :label="item.cate_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 图片 -->
        <el-form-item label="封面">
          <div>
            <div class="imgLoadin">
              <input
                type="file"
                class="updata"
                accept="image/*"
                style="display: none"
                @change="onFileChange"
                ref="updata"
              />
              <img
                src="@/assets/logo.png"
                ref="updataImg"
                alt=""
                style="width: 200px; height: 200px"
              />
              <!-- <img src="@/assets/logo.png"    alt="" v-else> -->
              <!-- <img :src="avatar ? avatar : baseImg" alt="" class="img" /> -->
            </div>
            <el-button @click="chooseImg" type="primary">选择图片</el-button>
            <!-- <el-button type='success' >上传图片</el-button> -->
          </div>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <!-- 富文本的使用 -->
          <quill-editor v-model="Form.content"></quill-editor>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="chang1">发布</el-button>
          <el-button type="warning" @click="chang2">存为草稿</el-button>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="uploadFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import imgObj from "@/assets/logo.png";
import { updatacatelist, updatarticle,article } from "@/api/http";

export default {
  data() {
    return {
      valueSearch:'',
      valueState:'',
      value: "",
      dialogVisible: false,
      Form: {
        title: "",
        cate_id: "",
        content: "",
        state: "已发布",
        cover_img: "",
      },
      cahelist: [],
      rules: {},
      queryInfo:{
                 pagenum:1,
                 pagesize:5,
                 cate_id:'',
                 state:'',

      },
      tableData:[],
      total:0,
      Statelist:['已发布','草稿'],
      selectCage:'',
      selectState:'',
      clear:false
    };
  },
  methods: {
    changeSearchValue(val){
      console.log(val)
      this.queryInfo.cate_id = val
    },
    changeSearchState(val){
      console.log(val)
      this.queryInfo.state = val
     
       console.log(this.queryInfo)
    },
    chang1() {
      this.Form.state = "已发布";
    },
    chang2() {
      草稿;
      this.Form.state = "已发布";
    },
    reset(){
       this.queryInfo.cate_id = ''
       this.queryInfo.state = ''
       this.valueSearch = ''
       this.valueState = ''
       console.log(this.queryInfo)
      
       this.getarticle()
    },
    change(val) {
      console.log(val);
      this.Form.cate_id = val;
     
    },
    async updatacatelist() {
      const { data: res } = await updatacatelist();
      console.log(res);

      if (res.code !== 0) {
        this.$message.error("分类列表获取失败");
      }
      const cage = res.data;
      const arr = [];
      console.log(cage);
      cage.forEach((item) => {
        console.log("item", item);
        arr.push(item);
        console.log("arr", arr);
        this.cahelist = arr;
        console.log(this.cahelist);
      });
    },
    chooseImg() {
      this.$refs.updata.click();
    },
    onFileChange(e) {
      const files = e.target.files;
      if (files.length === 0) {
        this.Form.cover_img = null;
        this.$refs.updataImg.setAttribute("src", imgObj);
      } else {
        console.log(files[0]);
        this.Form.cover_img = files[0];
        const url = URL.createObjectURL(files[0]);
        console.log("this.$refs.updataImg", this.$refs.updataImg);
        this.$refs.updataImg.setAttribute("src", url);
        console.log(this.Form);
        console.log("图片", this.Form.cover_img);
      }
    },
    async uploadFn() {
      console.log("上传");
      const fd = new FormData();
      console.log(123);
      fd.append("title", this.Form.title);
      fd.append("cate_id", this.Form.cate_id);
      fd.append("content", this.Form.content);
      fd.append("state", this.Form.state);
      fd.append("cover_img", this.Form.cover_img);
      const { data: res } = await updatarticle(fd);
      console.log(res);
      console.log(this.Form);
      if (res.code === 0) {
        this.$message.success("文章发布上传成功");
        this.getarticle()
        this.dialogVisible = false
        this.$store.dispatch("getuserinfo");
      } else {
        this.$message.error("文章发布失败");
      }
    },
   async getarticle(){
    console.log(111)
    console.log('+++++++++++++++++++++++++++++++++++++++++++++++')
    const {data:res} = await article(this.queryInfo)
    console.log('文章列表',res)
     this.tableData = res.data 
    console.log('this.tableData',this.tableData)
    this.total = res.total
    },
    handleSizeChange(val){
      this.queryInfo.pagesize = val
    },
    handleCurrentChange(val){
      this.queryInfo.pagenum = val
    },
  },
  created() {
    this.updatacatelist();
    // this.chooseImg();
    this.getarticle()
   
  },
};
</script>

<style lang='less' scoped>
.el-button {
  margin-left: 20px;
}

.imgLoadin {
  height: 200px;
  background-color: #eee;
  img {
    width: 200px;
    height: 200px;
  }
}
.el-table{
  margin: 20px 0;
}